<template>
  <div>
    <ul>
      <li class="ul_li" v-for="(item, index) in shuju" :key="index">
        <div class="monitor_li">
          <div class="monitor_img">
            <svg class="icon" aria-hidden="true">
              <use :xlink:href=" item['采集超时'] === 'true'
                    ? '#icon-wenshidubaojing'
                    : '#icon-wenshiduzhengchang'"></use>
            </svg>
          </div>
          <div class="equipment">
            <div class="equipment_name">
              <span>{{ item.name }}</span>
              <span v-show="moreS" class="more_equipment">
                <span>更多</span>
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-qianjin"></use>
                </svg>
              </span>
            </div>
            <p>
              <span>温度</span>
              <span>{{ item["温度"] }}℃</span>
            </p>
            <p>
              <span>湿度</span>
              <span>{{ item["湿度"] }}%</span>
            </p>
            <p>
              <span>在线状态</span>
              <span
                class="equipment_state"
                :style="
                  item['采集超时'] === 'true'
                    ? 'background-color:#fe4d55'
                    : 'background-color:#43f55c'
                "
              >
              </span>
            </p>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  props: ["shuju"],
  data: () => ({
    moreS: false,
    // shuju: [
    //   {
    //     name: "温湿度监测",
    //     温度: "24.7",
    //     湿度: "61.5",
    //     采集超时: false,
    //   },
    //   {
    //     name: "温湿度监测",
    //     温度: "24.7",
    //     湿度: "61.5",
    //     采集超时: true,
    //   },
    //   {
    //     name: "温湿度监测",
    //     温度: "24.7",
    //     湿度: "61.5",
    //     采集超时: true,
    //   },
    // ],
  }),
  created() {},
  methods: {},
};
</script>
<style lang="less" scoped>
</style>
